<template>
    <div>
        <el-col :span="20">
            <el-row>
                <el-col :span="6">
                    <el-row style="margin-bottom: 20px;">
                        <div class="custom-submenu">
                            <img :src="require('../../assets/yyt/icon-user.jpg')">
                        </div>
                    </el-row>
                    <el-row class="custom-submenu">
                        你好:{{ username }}
                    </el-row>
                </el-col>
                <el-col :span="6" style="margin-top: 8px;">
                    <el-row style="margin-bottom: 10px;">
                        我的账户<br>
                        ------------------------------
                    </el-row>
                    <el-row style="margin-bottom: 20px;">
                        可用余额: <div style="color: red; display: inline;">{{ this.user.availableMoney }}</div>元
                    </el-row>
                    <el-row style="margin-bottom: 20px;">
                        当月消费: <div style="color: red; display: inline;">{{ user.integral }}</div>元
                    </el-row>
                    <el-row>
                        我的积分: <div style="color: red; display: inline;">{{ user.integral }}</div>分
                    </el-row>
                </el-col>
                <el-col :span="9">
                    <el-tabs v-model="activeName">
                        <el-tab-pane label="" name="first">
                            <el-row style="margin-bottom: 20px;">
                                充值号码: <el-input placeholder="请输入内容" style="width: 60%;" v-model="phone"></el-input>
                            </el-row>
                            <el-row>
                                <el-col :span="4">
                                    充值金额:
                                </el-col>
                                <el-col :span="4">
                                    <el-button @click="rechargeAmount = '50'" type="primary" plain
                                        style="width: 60px; height: 30px;" class="centered-text-button">
                                        50
                                    </el-button>
                                </el-col>
                                <el-col :span="4">
                                    <el-button @click="rechargeAmount = '100'" type="primary" plain
                                        style="width: 60px; height:30px;" class="centered-text-button">
                                        100
                                    </el-button>
                                </el-col>
                                <el-col :span="4">
                                    <el-button @click="rechargeAmount = '400'" type="primary" plain
                                        style="width: 60px; height: 30px;" class="centered-text-button">
                                        300
                                    </el-button>
                                </el-col>
                                <el-col :span="4" style="margin-bottom: 20px;">
                                    <el-button @click="rechargeAmount = '500'" type="primary" plain
                                        style="width: 60px; height: 30px;" class="centered-text-button">
                                        500
                                    </el-button>
                                </el-col>
                            </el-row>
                            <el-row style="margin-left:150px">
                                <el-button type="primary" @click="recharge">立即充值</el-button>
                            </el-row>
                        </el-tab-pane>
                        <el-tab-pane label="" name="second">
                            <!-- <el-row style="margin-bottom: 20px;">
                                充值号码: <el-input placeholder="请输入内容" style="width: 60%;" v-model="phone"></el-input>
                            </el-row>
                            <el-row>
                                <el-col :span="4">
                                    充值金额:
                                </el-col>
                                <el-col :span="4">
                                    <el-button @click="rechargeAmount = '300MB'" type="primary" plain
                                        style="width: 60px; height: 30px;display: flex; align-items: center; justify-content: center;"
                                        class="centered-text-button">
                                        300MB
                                    </el-button>
                                </el-col>
                                <el-col :span="4">
                                    <el-button @click="rechargeAmount = '1G'" type="primary" plain
                                        style="width: 60px; height:30px;" class="centered-text-button">
                                        1G
                                    </el-button>
                                </el-col>
                                <el-col :span="4">
                                    <el-button @click="rechargeAmount = '2G'" type="primary" plain
                                        style="width: 60px; height: 30px;" class="centered-text-button">
                                        2G
                                    </el-button>
                                </el-col>
                                <el-col :span="4" style="margin-bottom: 10px;">
                                    <el-button @click="rechargeAmount = '3G'" type="primary" plain
                                        style="width: 60px; height: 30px;" class="centered-text-button">
                                        3G
                                    </el-button>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="4" style="margin-left:74px">
                                    <el-button @click="rechargeAmount = '5G'" type="primary" plain
                                        style="width: 60px; height: 30px;display: flex; align-items: center; justify-content: center;"
                                        class="centered-text-button">
                                        5G
                                    </el-button>
                                </el-col>
                                <el-col :span="4">
                                    <el-button @click="rechargeAmount = '10G'" type="primary" plain
                                        style="width: 60px; height:30px;" class="centered-text-button">
                                        10G
                                    </el-button>
                                </el-col>
                                <el-col :span="4">
                                    <el-button @click="rechargeAmount = '15G'" type="primary" plain
                                        style="width: 60px; height: 30px;" class="centered-text-button">
                                        15G
                                    </el-button>
                                </el-col>
                                <el-col :span="4" style="margin-bottom: 20px;">
                                    <el-button @click="rechargeAmount = '30G'" type="primary" plain
                                        style="width: 60px; height: 30px;" class="centered-text-button">
                                        30G
                                    </el-button>
                                </el-col>
                            </el-row> -->
                            <el-row style="margin-left:150px;">
                                <el-button type="primary">立即充值</el-button>
                            </el-row>
                        </el-tab-pane>
                    </el-tabs>
                </el-col>
            </el-row>
        </el-col>
    </div>
</template>

<script>
export default {
    data() {
        return {
            username: '',
            user: {

            },
            activeName: 'first',
            phone: '',
            rechargeAmount: ''
        }
    },
    methods: {
        queryUser() {
            let param = new URLSearchParams();
            param.append("phone", this.username);
            this.$axios.post('api/zgyd-user/queryUser', param)
                .then(res => {
                    if (res.data.code == 200) {
                        this.user = res.data.data
                    }
                })
        },
        recharge() {
            let param = new URLSearchParams();
            param.append("phone", this.phone);
            param.append("rechargeAmount", this.rechargeAmount);



        },
        Recharge() {
            this.$router.push("/recharge")
        }
    },
    created() {
        this.username = localStorage.getItem("username");
        this.queryUser();
    }
}
</script>

<style scoped>
.custom-submenu {
    margin-left: 30px;
}

.centered-text-button {
    text-align: center;
    /* 水平居中 */
    line-height: 10px;
    /* 垂直居中 */
}
</style>